<template>
  <div style="margin-top: -3px">
    <!-- 文件链接 -->
    <template v-for="item in fileList">
      <!-- app端 -->
      <a-button
        v-if="!checkVisibleInDetail"
        :key="item.fileId"
        type="link"
        @click="$message.warning('抱歉，app端无法导出，请在系统电脑端进行导出')"
      >
        {{ item.fileName }}
      </a-button>
      <!-- pc端 -->
      <a-popover
        v-else
        :key="item.fileId"
        placement="top"
      >
        <template slot="content">
          <a
            v-if="canDownload"
            :fileId="item.fileId"
            :fileName="item.fileName"
            :href="'/api/ycloud-file-center/oper/download?access_token=' + token + '&fileId=' + item.fileId"
            target="_self"
          >下载</a>
          <a-divider v-if="canDownload" type="vertical" />
          <a
            :key="item.fileId"
            @click="$filePreview(item)"
          >查看</a>
        </template>
        <a-button
          :key="item.fileId"
          size="small"
          type="link"
        >
          {{ item.fileName }}
        </a-button>
      </a-popover>
    </template>
    <span v-if="!fileList || fileList.length == 0">无</span>
  </div>
</template>

<script>
import Vue from 'vue'
import { checkVisibleInDetail } from '@/utils/util'

export default {
  name: 'FileLink',
  props: {
    // 文件列表
    fileList: {
      type: [Array],
      default() {
        return []
      }
    },
    canDownload: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      token: '',
      checkVisibleInDetail: checkVisibleInDetail(this)
    }
  },
  created() {
    this.token = Vue.getAcloudProvider().getAccessToken()
  }
}
</script>